<template>
    <div>
        <Shortcut></Shortcut>
        <div class="order-pay">
            <div class="header">
                <div class="title">
                    <div class="logo">
                        <Logo></Logo>
                    </div>
                    <div class="shop-name">慕西商城</div>
                    <div class="name">收银台</div>
                </div>
            </div>

            <div class="order-info">
                <div class="order-num">订单提交成功,请尽快付款! 订单号:
                    <span>{{ tradeNo }}</span>
                </div>
                <div class="pay-mode">
                    <div>应付金额:
                        <span class="pay-count">{{ orderAmount }}</span>元
                    </div>
                    <img src="@/assets/images/order/alipay.png" alt="">支付宝支付
                </div>
                <div class="pay-order">
                    <button class="pay-order-button" @click="toAliPay">立即支付</button>
                </div>
            </div>
        </div>
        我是支付页面
    </div>
</template>

<script setup>
    import Shortcut from '@/components/common/Shortcut.vue'
    import Logo from '@/components/common/Logo.vue'
    import { useRoute,useRouter } from 'vue-router'
    import { ref,onMounted } from 'vue'
    import { toAliPayPage } from '@/network/order'

    const route = useRoute()
    const router = useRouter()

    let tradeNo = ref()
    let orderAmount = ref(0)

    onMounted(() => {
        tradeNo.value = route.query.tradeNo
        orderAmount.value = route.query.orderAmount
    })


    const toAliPay = () => {
        let orderData = ref({
            tradeNo:tradeNo.value,
            orderAmount:orderAmount.value
        })

        let pay_url = ref("")

        toAliPayPage(orderData.value).then(res => {
            pay_url.value = res.alipay

            // 调用浏览器的跳转函数
            window.location.href = pay_url.value
        })

    }
</script>

<style lang="less" scoped>
    .order-pay {
        width: var(--content-width);
        margin: 0 auto;
        .header {
            // border: 2px solid #f00c0c;
            height: 120px;
            line-height: 120px;
            .title {
            display: flex;
            width: 1000px;
            margin: 0 auto;
            // border: 1px solid;
            height: 80px;
            line-height: 80px;

            .logo {
                // border: 1px solid;
                height: 40px;
            }
            .shop-name {
                font-size: 40px;
                font-weight: 700;
                margin-left: 10px;
                margin-top: 30px;
                color: #f00c0c;
            }
            .name {
                font-size: 25px;
                margin-left: 10px;
                margin-top: 30px;
            }
        }
        }

        .title-text {
            line-height: 42px;
            height: 42px;
            font-size: 16px;  
        }

        .order-info {
            margin-top: 20px;
            .order-num {
                font-size: 20px;

            }
            .pay-mode {
                font-size: 16px;
                margin-top: 20px;
                padding: 20px;
                .pay-count {
                    color: #e33f48;
                }
            }

            .pay-order {
                text-align: right;
                margin-top: 20px;
                .pay-order-button {
                    width: 135px;
                    height: 35px;
                    background-color: #f00c0c;
                    color: white;
                    border-radius: 5px;
                    margin-right: 200px;
                }
            }
        }
    }
</style>